<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: hongweixun
 * @Date: 2023-05-17 16:06:06
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2025-08-29 17:31:49
-->
<template>
  <div class="pay-count-box">
    <el-row :gutter="20" class="select-compair-box">
      <el-col :span="12">
        <SelectCom :value="schoolId" placeholder="输入/选择学校名称" @click="changeVal"></SelectCom>
      </el-col>
      <el-col :span="12" style="width: 100%;">
        <el-date-picker v-model="dataValue" :editable="false" :prefix-icon="dateImg" style="width: 100%;" 
          start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至" value-format="YYYY-MM-DD" type="daterange"
         @change="dateChange" />
      </el-col>
    </el-row>
    <TitleTwo title="学校缴费详细统计"></TitleTwo>
    <div class="contentBox">
      <div class="lfBox">
        <div id="PieChartTwo" ref="chartOneRef"></div>
      </div>
      <div class="rtBox">
        <div class="money-box-flex">
          <div>缴费总额</div>
          <CountTo :start="dataInfo.old_payment_total_amount" :end="dataInfo.new_payment_total_amount" :autoPlay="true"
            :duration="1500" class="3" suffix="" />
        </div>
        <div class="money-box-flex">
          <div>新生缴费额</div>
          <CountTo :start="dataInfo.old_payment_newer_amount" :end="dataInfo.new_payment_newer_amount" :autoPlay="true"
            :duration="1500" class="3" suffix="" />
        </div>
        <div class="money-box-flex">
          <div>续办总额</div>
          <CountTo :start="dataInfo.old_payment_renew_amount" :end="dataInfo.new_payment_renew_amount" :autoPlay="true"
            :duration="1500" class="3" suffix="" />
        </div>
      </div>
    </div>
    <div class="row-common-box">
      <div class="padding-left-common">
        <div class="position-circle-box">缴费总额</div>
        <CountTo :start="old_dataDetails.payment_total_amount" :end="dataDetails.payment_total_amount" :autoPlay="true"
          :duration="1500" class="4" prefix="" suffix="" />
      </div>
      <div class="padding-left-common">
        <div class="position-circle-box">新生缴费总额</div>
        <CountTo :start="old_dataDetails.payment_newer_amount" :end="dataDetails.payment_newer_amount" :autoPlay="true"
          :duration="1500" class="4" prefix="" suffix="" color="#00FCFF" />
      </div>
      <div class="padding-left-common">
        <div class="position-circle-box">续办总额</div>
        <CountTo :start="old_dataDetails.payment_renew_amount" :end="dataDetails.payment_renew_amount" :autoPlay="true"
          :duration="1500" class="4" prefix="" suffix="" color="#FCA12F" />
      </div>
      <div class="padding-left-common">
        <div class="position-circle-box">退款总额</div>
        <CountTo :start="old_dataDetails.payment_refund_amount" :end="dataDetails.payment_refund_amount"
          :autoPlay="true" :duration="1500" class="4" prefix="" suffix="" color="#FE4E4C" />
      </div>
    </div>
    <div class="row-common-box">
      <div class="padding-left-common">
        <div class="position-circle-box">缴费总数</div>
        <CountTo :start="old_dataDetails.payment_total_count" :end="dataDetails.payment_total_count" :autoPlay="true"
          :duration="1500" :decimals="0" class="4" prefix="" suffix="" />
      </div>
      <div class="padding-left-common">
        <div class="position-circle-box">新生缴费总数</div>
        <CountTo :start="old_dataDetails.payment_newer_count" :end="dataDetails.payment_newer_count" :autoPlay="true"
          :duration="1500" :decimals="0" class="4" prefix="" suffix="" color="#00FCFF" />
      </div>
      <div class="padding-left-common">
        <div class="position-circle-box">续办总数</div>
        <CountTo :start="old_dataDetails.payment_renew_count" :end="dataDetails.payment_renew_count" :autoPlay="true"
          :duration="1500" :decimals="0" class="4" prefix="" suffix="" color="#FCA12F" />
      </div>
      <div class="padding-left-common">
        <div class="position-circle-box">退款总数</div>
        <CountTo :start="old_dataDetails.payment_refund_count" :end="dataDetails.payment_refund_count" :autoPlay="true"
          :duration="1500" :decimals="0" class="4" prefix="" suffix="" color="#FE4E4C" />
      </div>
    </div>
    <div class="row-common-box">
      <div class="padding-left-common">
        <div class="position-circle-box">总办理率</div>
        <CountTo :start="old_dataDetails.payment_rate" :end="dataDetails.payment_rate" :autoPlay="true" :duration="1500"
          class="4" prefix="" suffix="" unit="%" />
      </div>
      <div class="padding-left-common">
        <div class="position-circle-box">新生办理率</div>
        <CountTo :start="old_dataDetails.payment_newer_rate" :end="dataDetails.payment_newer_rate" :autoPlay="true"
          :duration="1500" class="4" prefix="" suffix="" color="#00FCFF" unit="%" />
      </div>
      <div class="padding-left-common">
        <div class="position-circle-box">续办率</div>
        <CountTo :start="old_dataDetails.payment_renew_rate" :end="dataDetails.payment_renew_rate" :autoPlay="true"
          :duration="1500" class="4" prefix="" suffix="" color="#FCA12F" unit="%" />
      </div>
      <div class="padding-left-common">
        <div class="position-circle-box">退款率</div>
        <CountTo :start="old_dataDetails.payment_refund_rate" :end="dataDetails.payment_refund_rate" :autoPlay="true"
          :duration="1500" class="4" prefix="" suffix="" color="#FE4E4C" unit="%" />
      </div>
    </div>
    <div class="listFlex">
      <div class="listItem">
        <div>待转入总额</div>
        <CountTo :start="old_dataDetails.payment_pre_total_amount" :end="dataDetails.payment_pre_total_amount"
          :autoPlay="true" :duration="1500" class="4" prefix="" suffix="" />
      </div>
      <div class="listItem">
        <div>待转入总数</div>
        <CountTo :start="old_dataDetails.payment_pre_count" :end="dataDetails.payment_pre_count" :autoPlay="true"
          :duration="1500" :decimals="0" class="4" prefix="" suffix="" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import dateImg from './Common/IconDatePicker.vue'
import SelectCom from './Common/SelectCom.vue'
import canvasImg from '../assets/images/ikon_yuan@2x.png'
import $util from "../util/util"
import * as echarts from 'echarts'
interface PropsType {
  //   是否需要更多按钮
  canvasHeight?: any
  payStartCount: any
  payEndCount: any
  startDate?: string
  endDate?: string
}
const props = withDefaults(defineProps<PropsType>(), {
  canvasHeight: 320,
  payStartCount: 0,
  payEndCount: 90000,
  startDate: '',
  endDate: ''
})
interface EmitType {
  (e: 'selectItem', obj: any, type: string): void
}
const emit = defineEmits<EmitType>()
const schoolId = ref<any>('')
const dataValue = ref<any>([])
const changeVal = (val: any) => {
  schoolId.value = val
  const params = {
    startDate: dataValue.value[0],
    endDate: dataValue.value[1],
    schoolId: schoolId.value
  }
  emit('selectItem', params, 'school')
}
const dateChange = (date: any) => {
  const params = {
    startDate: date[0],
    endDate: date[1],
    schoolId: schoolId.value
  }
  emit('selectItem', params, 'date')
}
const dataInfo = ref<any>({
  old_payment_total_amount: 0,
  old_payment_newer_amount: 0,
  old_payment_renew_amount: 0,
  new_payment_total_amount: 0,
  new_payment_newer_amount: 0,
  new_payment_renew_amount: 0,
})
const dataDetails = ref<any>({})
const old_dataDetails = ref<any>({
  payment_total_amount: 0,
  payment_total_count: 0,
  payment_rate: 0,
  payment_newer_amount: 0,
  payment_newer_count: 0,
  payment_newer_rate: 0,
  payment_renew_amount: 0,
  payment_renew_count: 0,
  payment_renew_rate: 0,
  payment_refund_amount: 0,
  payment_refund_count: 0,
  payment_refund_rate: 0,
  payment_pre_total_amount: 0,
  payment_pre_count: 0,
})
const setTotalData = (obj: any) => {
  dataInfo.value.old_payment_total_amount = JSON.parse(JSON.stringify(dataInfo.value.new_payment_total_amount))
  dataInfo.value.old_payment_newer_amount = JSON.parse(JSON.stringify(dataInfo.value.new_payment_newer_amount))
  dataInfo.value.old_payment_renew_amount = JSON.parse(JSON.stringify(dataInfo.value.new_payment_renew_amount))
  dataInfo.value.new_payment_total_amount = Number(obj.payment_total_amount)
  dataInfo.value.new_payment_newer_amount = Number(obj.payment_newer_amount)
  dataInfo.value.new_payment_renew_amount = Number(obj.payment_renew_amount)
}
const setTotalData2 = (obj: any) => {

  old_dataDetails.value = JSON.parse(JSON.stringify(dataDetails.value))
  // 同时也确保obj中的字段转换为数字类型后再赋值给dataDetails.value
  const numericObj: any = {}
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      numericObj[key] = !isNaN(Number(obj[key])) ? Number(obj[key]) : obj[key]
    }
  }
  dataDetails.value = numericObj
}
const chartOneRef = ref<any>(null)
let myChart: any = null
const chartData = ref<any>([])
const getCharts = async (data: any) => {
  chartData.value = data
  let arr: any = []
  data.forEach((item: any) => {
    arr.push({ value: item.payment_newer_rate, name: item.school_name, ...item })
  })
  myChart = echarts.init(chartOneRef.value)
  var option = {
    series: [
      {
        name: '',
        confine: true,
        type: 'pie',
        radius: ['38%', '80%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        clockWise: false, // 默认逆时针
        normal: {
          borderWidth: 2,
          borderColor: '#fff'
        },
        itemStyle: {
          borderColor: '#0A1739',
          borderWidth: 1
        },
        label: {
          show: false,
          position: 'center',
          normal: {
            show: false,
            position: 'center',
            rich: {
              total: {
                fontSize: $util.fontSize(18),
                fontFamily: "Arial-Bold, Arial",
                color: '#ffffff',
                lineHeight: $util.fontSize(22),
                fontWeight: 'bold'
              },
              active: {
                fontFamily: "Microsoft YaHei-Bold, Microsoft YaHei",
                fontSize: $util.fontSize(14),
                color: '#ffffff',
                lineHeight: $util.fontSize(22),
                fontWeight: 'bold'
              },
            }
          },
          emphasis: {
            show: false
          }
        },
        data: arr,
      }
    ],
    // 新增：中心图片配置
    graphic: [{
      type: 'image',
      left: "center",
      top: "center",
      style: {
        image: canvasImg, // 图片URL（本地路径需替换为项目路径）
        width: $util.fontSize(70),  // 图片宽度
        height: $util.fontSize(70)  // 图片高度
      },
      z: 1 // 层级（大于饼图的z值，确保显示在最上层）
    }],
    tooltip: {
      backgroundColor: "#fff",
      borderColor: 'transparent',
      extraCssText: "box-shadow: 0px 9px 28px 1px rgba(0,0,0,0.05);",
      // 添加自定义position函数，让tooltip显示在饼图外部上方
      position: ['-80%', '20%'],
      formatter: function (obj: any) {
        return (
          `<span style='font-size: 12px;
                            font-family: Source Han Sans CN, Source Han Sans CN;
                            font-weight: bold;
                            color:#000000;width:100%;text-align: center;margin-bottom:4px;display:inline-block;text-align: left;'>${arr[obj.dataIndex].school_name}</span>` +
          `<br>` + `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
                          <span><span style="display:inline-block;font-size:12px;vertical-align: middle;color:#000000;">学生总数量：</span></span>
                          <span style="display:inline-block;margin-left:20px;font-size:12px;vertical-align: middle;color:#333333;">${arr[obj.dataIndex].student_count}人</span>
                        </span>` + `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
                          <span><span style="display:inline-block;font-size:12px;vertical-align: middle;color:#000000;">新生数量：</span></span>
                          <span style="display:inline-block;margin-left:20px;font-size:12px;vertical-align: middle;color:#333333;">${arr[obj.dataIndex].new_student_count}人</span>
                        </span>`+ `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
                        <span><span style="display:inline-block;font-size:12px;vertical-align: middle;color:#000000;">缴费总额：</span></span>
                          <span style="display:inline-block;margin-left:20px;font-size:12px;vertical-align: middle;color:#333333;">${arr[obj.dataIndex].payment_total_amount}元</span>
                        </span>`+ `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
                        <span><span style="display:inline-block;font-size:12px;vertical-align: middle;color:#000000;">缴费总数：</span></span>
                          <span style="display:inline-block;margin-left:20px;font-size:12px;vertical-align: middle;color:#333333;">${arr[obj.dataIndex].payment_total_count}人</span>
                        </span>`+ `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
                        <span><span style="display:inline-block;font-size:12px;vertical-align: middle;color:#000000;">总办理率：</span></span>
                          <span style="display:inline-block;margin-left:20px;font-size:12px;vertical-align: middle;color:#333333;">${arr[obj.dataIndex].payment_rate}%</span>
                        </span>`+ `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
                        <span><span style="display:inline-block;font-size:12px;vertical-align: middle;color:#000000;">新生缴费总额：</span></span>
                          <span style="display:inline-block;margin-left:20px;font-size:12px;vertical-align: middle;color:#333333;">${arr[obj.dataIndex].payment_newer_amount}元</span>
                        </span>`+ `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
                        <span><span style="display:inline-block;font-size:12px;vertical-align: middle;color:#000000;">新生缴费总数：</span></span>
                          <span style="display:inline-block;margin-left:20px;font-size:12px;vertical-align: middle;color:#333333;">${arr[obj.dataIndex].payment_newer_count}人</span>
                        </span>`+ `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
                        <span><span style="display:inline-block;font-size:12px;vertical-align: middle;color:#000000;">新生办理率：</span></span>
                          <span style="display:inline-block;margin-left:20px;font-size:12px;vertical-align: middle;color:#333333;">${arr[obj.dataIndex].payment_newer_rate}%</span>
                        </span>`+ `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
                        <span><span style="display:inline-block;font-size:12px;vertical-align: middle;color:#000000;">续办总额：</span></span>
                          <span style="display:inline-block;margin-left:20px;font-size:12px;vertical-align: middle;color:#333333;">${arr[obj.dataIndex].payment_renew_amount}元</span>
                        </span>`+ `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
                        <span><span style="display:inline-block;font-size:12px;vertical-align: middle;color:#000000;">续办总数：</span></span>
                          <span style="display:inline-block;margin-left:20px;font-size:12px;vertical-align: middle;color:#333333;">${arr[obj.dataIndex].payment_renew_count}人</span>
                        </span>`+ `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
                        <span><span style="display:inline-block;font-size:12px;vertical-align: middle;color:#000000;">续办率：</span></span>
                          <span style="display:inline-block;margin-left:20px;font-size:12px;vertical-align: middle;color:#333333;">${arr[obj.dataIndex].payment_renew_rate}%</span>
                        </span>`+ `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
                        <span><span style="display:inline-block;font-size:12px;vertical-align: middle;color:#000000;">退款总额：</span></span>
                          <span style="display:inline-block;margin-left:20px;font-size:12px;vertical-align: middle;color:#333333;">${arr[obj.dataIndex].payment_refund_amount}元</span>
                        </span>`+ `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
                        <span><span style="display:inline-block;font-size:12px;vertical-align: middle;color:#000000;">退款总数：</span></span>
                          <span style="display:inline-block;margin-left:20px;font-size:12px;vertical-align: middle;color:#333333;">${arr[obj.dataIndex].payment_refund_count}人</span>
                        </span>`+ `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
                        <span><span style="display:inline-block;font-size:12px;vertical-align: middle;color:#000000;">退款率：</span></span>
                          <span style="display:inline-block;margin-left:20px;font-size:12px;vertical-align: middle;color:#333333;">${arr[obj.dataIndex].payment_refund_rate}%</span>
                        </span>`+ `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
                        <span><span style="display:inline-block;font-size:12px;vertical-align: middle;color:#000000;">待转入总额：</span></span>
                          <span style="display:inline-block;margin-left:20px;font-size:12px;vertical-align: middle;color:#333333;">${arr[obj.dataIndex].payment_pre_total_amount}人</span>
                        </span>`+ `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
                        <span><span style="display:inline-block;font-size:12px;vertical-align: middle;color:#000000;">待转入总数：</span></span>
                          <span style="display:inline-block;margin-left:20px;font-size:12px;vertical-align: middle;color:#333333;">${arr[obj.dataIndex].payment_pre_count}人</span>
                        </span>`
        )
      }
    },
  }
  myChart.setOption(option)
}
//重新加载图表
const reloadChart = async () => {
  disposeChart()
  await getCharts(chartData.value)
}
const disposeChart = () => {
  if (myChart) {
    myChart.dispose()
  }
}
onMounted(async () => {
  window.addEventListener('resize', () => {
    // 计算高度
    setTimeout(async () => {
      await reloadChart()
    }, 500);
  })
})
defineExpose({ getCharts, setTotalData, setTotalData2, dataValue })
</script>
<style lang="scss" scoped>
.pay-count-box {
  padding-bottom: 30px;

  .select-compair-box {
    margin-bottom: 20px;
  }

  .contentBox {
    display: flex;
    height: 212px;
    align-items: center;

    .lfBox {
      flex: 1;
      width: 100%;
      height: 212px;

      #PieChartTwo {
        width: 100%;
        height: 100%;
      }
    }

    .rtBox {
      width: 238px;

      .money-box-flex {
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        align-items: center;
        justify-content: center;
        margin: 16px 0;
        padding: 0 10px;

        div:first-of-type {
          width: 100%;
          font-weight: bold;
          font-size: 14px;
        }
      }
    }
  }
}

.money-box-flex {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: var(--el-text-color-regular);
  padding: 15px 20px;
  font-size: 18px;
}

.row-common-box {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.row-common-box:last-of-type {
  margin-bottom: 40px;
}

.padding-left-common {
  flex: 1;
  padding: 0 5px;
  // padding: 0 15%;
  color: var(--el-text-color-regular);
  font-size: 16px;

  .position-circle-box {
    font-size: 14px;
    position: relative;
    margin-bottom: 6px;
  }
}

.padding-left-common:nth-of-type(1),
.padding-left-common:nth-of-type(2) {
  flex: 1.2;
}

.listFlex {
  display: flex;
  align-items: center;

  .listItem {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 14px;

    div:first-of-type {
      margin-right: 15px;
    }
  }

  // justify-content: space-between;
}
</style>
<style lang="scss">
.el-input__suffix-inner {
  width: 20px;
}

.el-input__wrapper {
  width: 100%;
}
</style>